<template>
    <BasePopPanel
        title="图层"
        type="right"
        right="1010px"
        width="248px"
        height="560px"
        :show-close="false"
        class="reset-layer-tool-panel-box"
    >
        <ElScrollbar style="width: 100%; height: 100%">
            <LayerTreeCheck
                :default-value="defaultChecked"
                :tree-data="treeData"
                @check-change="onCheckChange"
            />
        </ElScrollbar>
    </BasePopPanel>
</template>

<script setup lang="ts">
import BasePopPanel from '@/components/BasePopPanel/index.vue'
import LayerTreeCheck from '@/components/LayerTreeCheck/index.vue'
import { addTestGroupOnePointLayer, layerMap, removeCombinedLayers } from '@/utils/map-tools'

// 默认选择的图层
const defaultChecked = ['testGroup-1']

// icon定义
const iconConfig = {
    A91230101: 'layer-tool-panel/gas/guo.png',
    A91230102: 'layer-tool-panel/gas/sheng.png',
    A91230103: 'layer-tool-panel/gas/da-qi-gong-ye-yuan-zhan.png',
    A91230801: 'layer-tool-panel/gas/jiao-tong-zhan.png',
    A91230301: 'layer-tool-panel/gas/ke-li-wu.png',
    OUTLET: 'layer-tool-panel/gas/qi-ye-pai-kou.png',
    CONS_DUST: 'layer-tool-panel/gas/gong-di-yang-cheng.png',
}

// 图层定义
const treeData = ref<any[]>([
    {
        key: 'env',
        label: '大气环境',
        children: [
            {
                key: 'A91230101',
                label: '国控站',
                value: 0,
                icon: iconConfig.A91230101,
            },
            {
                key: 'A91230102',
                label: '省控站',
                value: 0,
                icon: iconConfig.A91230102,
            },
            {
                key: 'A91230103', // 目前使用市控站
                label: '大气工业园站',
                value: 0,
                icon: iconConfig.A91230103,
            },
            {
                key: 'A91230801',
                label: '交通站',
                value: 0,
                icon: iconConfig.A91230801,
            },
            {
                key: 'A91230301',
                label: '颗粒物组分站',
                value: 0,
                icon: iconConfig.A91230301,
            },
        ],
    },
    {
        key: 'source',
        label: '源监控',
        children: [
            {
                key: 'OUTLET',
                label: '企业排口',
                value: 0,
                icon: iconConfig.OUTLET,
            },
            {
                key: 'CONS_DUST',
                label: '工地扬尘',
                value: 0,
                icon: iconConfig.CONS_DUST,
            },
        ],
    },
    {
        key: 'testGroup',
        label: '测试',
        children: [
            {
                key: 'testGroup-1',
                label: '测试点位图层',
                value: false,
                icon: false,
            },
        ],
    },
])

// 监听图层修改
const onCheckChange = (parent: string, child: string) => {
    console.log(parent, child)

    if (parent === 'testGroup') {
        addTestGroupOnePointLayer(child.includes('testGroup-1'))
    }
}

// 卸载图层
onUnmounted(() => {
    removeCombinedLayers([layerMap.testLayer])
})
</script>
